<template>
  <div class="home">
     <h2>添加目标</h2>
     <input class="inputs"  v-model="title" @keyup.enter="add" type="text" placeholder="输入小目标后，按回车确认">
     <p>共有 个目标,已完成 个目标,还有 条未完成</p>
     <p>
        <input type="radio" @click="checkchange(1)" name="1" checked><label >所有目标</label>
        <input type="radio" @change="checkchange(2)" name="1"><label >已完成目标</label>
        <input type="radio" @change="checkchange(3)" name="1"><label >未完成目标</label>
     </p>
     <!-- 全部 -->
     <div v-show="ind==1">
         <ul>
            <li v-for="item in $store.state.todolist" :key="item.id">
                <input type="checkbox" :checked="item.flag" @click="flag(item)">
                {{item.title}}
                <button @click="del(item.id)">x</button>
            </li>
         </ul>
        </div>
     <!-- 已经完成 -->
     <div v-show="ind==2">
        <ul>
            <li v-for="item in $store.state.todolist" :key="item.id"  v-show="item.flag">
                <input type="checkbox" :checked="item.flag" @click="flag(item)">
                {{item.title}}
                <button @click="del(item.id)">x</button>
            </li>
        </ul>
     </div>
     <!-- 未完成 -->
     <div v-show="ind==3">
        <ul>
            <li v-for="item in $store.state.todolist" :key="item.id"  v-show="!item.flag">
                <input type="checkbox" :checked="item.flag" @click="flag(item)">
                {{item.title}}
            </li>
        </ul>
     </div>
     
  </div>
</template>

<script  setup>
import {ref,reactive} from 'vue'
import {useStore} from 'vuex'


const title=ref('')
const ind=ref(1)
const store=useStore()

const data=reactive({
})
 const  add=()=>{
   store.commit('add', {title:title.value,flad:false,})
   title.value=""
   }
const checkchange=(index)=>{
  ind.value=index
  console.log(ind.value);

}
const flag=(item)=>{
  store.commit('flag',item)
}
const del=(id)=>{
  store.commit('del',id)
}

</script>
<style lang="scss" scoped>
.inputs{
  width: 500px;
  height: 40px;
  line-height: 40px;
}
ul{
  li{
    list-style: none;
  }
}
</style>


